<template>
  <div class="app-box">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div class="tempering" v-else>
      <div class="tempering_title">
        <div class="company-logo">
          <img :src="company_logo" alt="" @click="$router.back()" />
          <div class="company-name" @click="$router.back()" :style="{}">
            {{ company_name }}
          </div>
        </div>
        <div class="checkTemper">
          <div
            class="button"
            :class="number == 1 ? 'active' : null"
            @click="handlerTemper(1)"
          >
            <div>1号钢化炉</div>
          </div>
          <div
            class="button"
            :class="number == 2 ? 'active' : null"
            @click="handlerTemper(2)"
          >
            <div>2号钢化炉</div>
          </div>
        </div>
        <div class="time">
          <div class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</div>
          <dv-decoration-5 style="width: 350px; height: 30px" :dur="2" />
        </div>
      </div>
      <div class="view">
        <div class="view-left">
          <div class="tempering-view">
            <div
              class="glassGroup"
              ref="baseTem"
              v-loading="listloading"
              element-loading-background="#121c2b"
            >
              <div
                v-show="!listloading"
                class="glass-list"
                v-for="item in handlerGlassData"
                :key="item.id"
                :style="{
                  bottom:
                    item.inY * (baseTemHeight / WH[number - 1].height) + 'px',
                  left: item.inX * (baseTemWidth / WH[number - 1].width) + 'px',
                  width:
                    item.furInWidth * (baseTemWidth / WH[number - 1].width) +
                    'px',
                  height:
                    item.furInHeight * (baseTemHeight / WH[number - 1].height) +
                    'px',
                  border: `2px solid  ${
                    SelectedList.includes(item.id) ? 'red' : '#000002'
                  } `,
                  backgroundColor:
                    currentTemper == maxTemper &&
                    glassType.indexOf(item.optGlass.cardCode) != -1
                      ? colorList[glassType.indexOf(item.optGlass.cardCode)]
                      : colorList[0],
                }"
                @click="
                  SelectedList.includes(item.id)
                    ? SelectedList.splice(SelectedList.indexOf(item.id), 1)
                    : SelectedList.push(item.id)
                "
              >
                {{ item.furInWidth + "*" + item.furInHeight }} <br />
                <div class="rule">
                  {{ item.furInWidth > item.furInHeight ? "W" : "H" }}
                </div>
                <div class="type">
                  {{ item.type }}
                </div>
                <div
                  class="originalCard"
                  :style="{
                    color: temperId == 1 ? '#fff' : 'red',
                    fontSize: temperId == 1 ? '18px' : '26px',
                  }"
                >
                  {{ item.optGlass.cardCode }}
                </div>
                <div class="optcontent">
                  {{ item.optGlass.barcode }},{{ item.optGlass.disturbCode }}
                </div>
                <div class="glassID">
                  {{ item.id }}
                </div>
              </div>
            </div>
            <div
              class="to-left"
              :style="{ animation: 'animate 5s linear infinite' }"
            >
              <i
                class="el-icon-d-arrow-left"
                :class="isruning ? 'running' : 'stop'"
              ></i>
              <i
                class="el-icon-d-arrow-left"
                :class="isruning ? 'running' : 'stop'"
              ></i>
              <i
                class="el-icon-d-arrow-left"
                :class="isruning ? 'running' : 'stop'"
              ></i>
              <i
                class="el-icon-d-arrow-left"
                :class="isruning ? 'running' : 'stop'"
              ></i>
            </div>
          </div>
          <div class="tempering-action">
            <div class="tempering-action-box">
              <el-button-group>
                <el-button
                  type="primary"
                  icon="el-icon-arrow-left"
                  size="medium "
                  @click="decreamTemper(0)"
                  >上一炉</el-button
                >
                <el-button
                  type="primary"
                  size="medium "
                  @click="handleUpdate( 1)"
                  >报损{{
                    SelectedList.length != 0 ? `(${SelectedList.length})` : null
                  }}</el-button
                >
                <el-button
                  type="primary"
                  size="medium "
                  @click="handleUpdate( 2)"
                  >清除{{
                    SelectedList.length != 0 ? `(${SelectedList.length})` : null
                  }}</el-button
                >
                <el-button
                  type="primary"
                  size="medium "
                  @click="currentTemperEvent"
                  >当前炉({{ this.maxTemper }})</el-button
                >
                <el-button
                  type="primary"
                  size="medium"
                  @click="decreamTemper(1)"
                  >下一炉<i class="el-icon-arrow-right el-icon--right"></i
                ></el-button>
              </el-button-group>
            </div>
          </div>
        </div>
        <div class="view-right">
          <dv-border-box-12 style="width: 380px; height: 24.5%">
            <div class="view-item">
              <tyTitle
                :content="temperId == 1 ? '进炉号' : '出炉号'"
                size="40px"
                :tyVlaue="checkTemper"
              /></div
          ></dv-border-box-12>
          <dv-border-box-12 style="width: 380px; height: 24.5%">
            <div class="view-item">
              <tyTitle content="玻璃数量" size="40px" :tyVlaue="checkNumber" />
            </div>
          </dv-border-box-12>
          <dv-border-box-12 style="width: 380px; height: 24.5%">
            <div class="view-item">
              <tyTitle
                content="玻璃面积"
                size="40px"
                :tyVlaue="temperArea + 'm²'"
              />
            </div>
          </dv-border-box-12>
          <dv-border-box-12 style="width: 380px; height: 24.8%">
            <div class="roatio">
              <div class="roatioTitle">
                <tyTitle content="钢化炉装载率" size="40px" isTitle />
              </div>
              <div class="progress">
                <dv-decoration-9 style="width: 150px; height: 150px"
                  ><span class="progress-text"
                    >{{ Number(loadSize) }}%</span
                  ></dv-decoration-9
                >
              </div>
            </div>
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/formateTime.js";
import tyTitle from "@/views/components/production/tyTitle.vue";
import { mark, temperMark } from "@/api/production/operation";
import { outShow } from "@/api/assembly/glass";
import { debounce } from "lodash";
import { colorList } from "./config/color";
import WH from "./config/temper_W_H";
import anime from "animejs";
export default {
  components: {
    tyTitle,
  },
  data() {
    return {
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      glassData: [],
      SelectedList: [],
      currentTemper: 0,
      maxTemper: null,
      loading: true,
      number: 1,
      baseTemWidth: 0,
      baseTemHeight: 0,
      colorList,
      listloading: false,
      isruning: false,
      checkList: [],
      temperId: 1,
      timer: null,
      WH,
    };
  },
  methods: {
    handleUpdate(state) {
      if (sessionStorage.getItem("showNewLosses") == "true" && state == 1) {
        let data =  this.glassData.filter((item)=> this.SelectedList.includes(item.id))
        this.$openLosses.showDialog(data, () => {
          this.$store.dispatch("listGlass").then((res) => {
            this.reload();
            this.loadTable = false;
            this.$emit("updateTable");
          });
        });
      } else {
        this.$prompt("请输入密码", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /^5563$/,
          inputErrorMessage: "密码错误",
          inputType: "password",
        }).then(({ value }) => {
          this.loadTable = true;
          abnormal(row.id, state).then((res) => {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.$store.dispatch("listGlass").then((res) => {
              this.reload();
              this.loadTable = false;
              this.$emit("updateTable");
            });
          });
        });
      }
    },
    exitCurrentTem(data) {
      this.isruning = true;
      let that = this;
      clearInterval(that.timer);
      anime({
        targets: ".glass-list",
        keyframes: [
          { translateX: this.baseTemWidth * -1, duration: 5000 },
          { translateX: 0, duration: 1 },
        ],
        easing: "linear",
        loop: false,
        begin: function () {
          that.isruning = true;
        },
        complete: function () {
          that.isruning = false;
          that.checkList = [];
          that.glassData = data.data;
          that.maxTemper = data.maxTemper;
          that.currentTemper = data.maxTemper;
          that.addInterval();
        },
      });
    },
    handlerTemper(e) {
      if (this.listloading)
        return this.$message({
          message: "操作过快，请稍后...",
          type: "warning",
        });
      this.number = e;
      this.maxTemper = null;
      clearInterval(this.timer);
      this.listloading = true;
      this.glassData = [];
      this.getEdgingGlass();
      this.addInterval();
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
        this.$nextTick(() => {
          this.onresize();
        });
      }, 500);
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    getBeforeGlass() {
      this.$store.dispatch("listGlass");
    },
    getEdgingGlass: debounce(function (params = null) {
      if (this.temperId == 1) {
        console.log(this.number);
        temperMark({
          temperNumber: params,
          temperId: this.number,
        }).then((res) => {
          this.listloading = false;
          if (res.code == 200) {
            if (
              this.maxTemper != null &&
              this.maxTemper != res.maxTemper &&
              params == null
            ) {
              this.exitCurrentTem(res);
            } else {
              this.maxTemper = res.maxTemper;
              this.currentTemper = params == null ? res.maxTemper : params;
              this.glassData = res.data;
            }
          } else {
            this.$message.error(res.data.msg || "网络错误");
          }
        });
      } else {
        outShow({
          temperNumber: params,
          temperId: this.number,
        }).then((res) => {
          this.listloading = false;
          if (res.code == 200) {
            if (
              this.maxTemper != null &&
              this.maxTemper != res.data.maxFurMark &&
              params == null
            ) {
              this.exitCurrentTem(res);
            } else {
              this.maxTemper = res.data.maxFurMark;
              this.currentTemper =
                params == null ? res.data.maxFurMark : params;
              this.glassData = res.data.glassList;
            }
          } else {
            this.$message.error(res.data.msg || "网络错误");
          }
        });
      }
    }, 100),
    decreamTemper(e) {
      if (e == 1 && this.currentTemper < this.maxTemper) {
        this.currentTemper++;
        this.listloading = true;
        this.getEdgingGlass(this.currentTemper);
      } else if (e == 0) {
        if (this.currentTemper > 1) {
          this.listloading = true;
          this.currentTemper--;
        }
        this.getEdgingGlass(this.currentTemper);
      }
    },
    currentTemperEvent() {
      this.listloading = true;
      // this.currentTemper = this.maxTemper;
      this.getEdgingGlass(this.maxTemper);
    },
    onresize() {
      this.baseTemWidth = this.$refs.baseTem.clientWidth;
      this.baseTemHeight = this.$refs.baseTem.clientHeight;
    },
    addInterval() {
      this.timer = setInterval(() => {
        if (this.currentTemper == this.maxTemper || this.maxTemper == null) {
          this.getEdgingGlass();
        }
      }, 4000);
    },
  },
  watch: {
    glassType() {
      this.checkList = this.glassType;
    },
    temperArea() {
      this.total += this.temperArea * 1;
    },
  },
  created() {
    this.timeFn();
    this.cancelLoading();
    this.getEdgingGlass();
    this.addInterval();
    this.temperId = this.$route.query.id;
    this.number = this.$route.query.orderId || 1;
  },
  computed: {
    handlerGlassData() {
      return this.glassData;
    },
    glassType() {
      let arr = this.checkList;
      this.glassData.forEach((item) => {
        if (!arr.includes(item.optGlass.cardCode)) {
          arr.push(item.optGlass.cardCode);
        }
      });
      return arr;
    },
    checkNumber() {
      return this.glassData.length;
    },
    checkTemper() {
      return this.currentTemper;
    },
    temperArea() {
      if (this.glassData.length == 0) return 0;
      return (
        this.glassData.reduce((pre = 0, cur) => {
          return pre + cur.furInWidth * cur.furInHeight;
        }, 0) / 1000000
      ).toFixed(2);
    },
    loadSize() {
      if (this.glassData.length == 0) return 0;
      return (
        this.temperArea /
        ((this.WH[this.number - 1].width * this.WH[this.number - 1].height) /
          100000000)
      ).toFixed(2);
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
  mounted() {
    window.addEventListener("resize", this.onresize);
  },
};
</script>

<style lang="less" scoped>
.dv-decoration-5 {
  transform: translateY(8px);
 
}
.app-box {
  width: 100%;
  height: 100%;
  background-color: black;
  color: #fff;
  overflow: hidden;
}
.tempering {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("../../../assets/images/bg3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  .tempering_title {
    height: 8%;
    display: flex;
    align-items: center;
    .company-logo {
      height: 100%;
      padding: 5px 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 50px;
        height: 50px;
        margin-right: 20px;
      }
      .company-name {
        font-size: 32px;
        font-weight: bold;
        letter-spacing: 10px;
        display: flex;
        align-items: flex-end;
        background: -webkit-linear-gradient(
          135deg,
          #007aff,
          #00dfff 50%,
          #007aff
        );
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: flowCss 12s infinite linear;
      }
      @-webkit-keyframes flowCss {
        0% {
          /* 移动背景位置 */
          background-position: 0 0;
        }
        100% {
          background-position: -400% 0;
        }
      }
    }
    .checkTemper {
      width: 58%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .button {
        width: 500px;
        height: 47px;
        text-align: center;
        transform: skewX(-45deg);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #17b9fc;
        border: 1px solid #17b9fc;
      }

      .button > div {
        transform: skewX(45deg);
        font-size: 24px;
        font-weight: bold;
        letter-spacing: 10px;
      }
      .active {
        background-image: linear-gradient(to top, #1890ff 0%, #16e2ff 100%);
        color: #fff;
      }
    }
    .time {
      margin-left: auto;
      font-size: 24px;
      padding-right: 20px;
      letter-spacing: 1px;
      text-align: center;
      .text {
        transform: translateY(8px) !important;
      }
    }
  }
  .view {
    flex: 1;
    display: flex;

    .view-left {
      width: 80%;
      height: 100%;
      // border-right: 1px dashed #e6e6e6;
      display: flex;
      flex-direction: column;
      .tempering-view {
        margin: 0 10px;
        position: relative;
        height: 85%;
        border: 2px solid #46a6ff;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        .glassGroup {
          position: relative;
          width: 100%;
          height: 100%;
          margin-right: 10px;
          .glass-list {
            position: absolute;
            background-color: blue;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            background-color: #17b9fc;
            z-index: 3;
            cursor: pointer;
            .glassID {
              position: absolute;
              left: 5px;
              top: 0;
              font-size: 18px;
            }
            .type {
              position: absolute;
              font-size: 18px;
              right: 5px;
              top: 0;
            }
            .originalCard {
              font-size: 18px;
              margin-top: 10px;
            }
            .optcontent {
              position: absolute;
              right: 5px;
              bottom: 2px;
              font-size: 16px;
            }
            .rule {
              position: absolute;
              left: 5px;
              bottom: 2px;
            }
          }
        }
        .to-left {
          position: absolute;
          display: flex;
          align-items: center;
          overflow: hidden;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          z-index: 1;
          i {
            font-size: 500px;
            font-weight: bold;
            color: #233172 !important;
            animation: animate 5s linear infinite;
          }
          .running {
            animation-play-state: running;
          }
          .stop {
            animation-play-state: paused;
          }
          @keyframes animate {
            0% {
              transform: translateX(0px);
            }
            25% {
              transform: translateX(-125px);
            }

            50% {
              transform: translateX(-250px);
            }

            75% {
              transform: translateX(-375px);
            }

            100% {
              transform: translateX(-501px);
            }
          }
        }
        .to-left2 {
          position: absolute;
          bottom: 0;
          left: 0;
          height: 50px;
          width: 50px;
          img {
            height: 50px;
            width: 50px;
          }
        }
      }
      .tempering-action {
        flex: 1;
        padding: 10px;
        display: flex;
        .tempering-direction {
          width: 6%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #1890ff;
          color: #e6e6e6;
          font-size: 80px;
          font-weight: bold;
        }
      }
      .tempering-action-box {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .view-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      .view-item {
        width: 100%;
        height: 100%;
        // border-bottom: 1px dashed #e6e6e6;
      }
    }
    .roatio {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .roatioTitle {
        height: 20%;
        width: 100%;
        display: flex;
        align-items: center;
        transform: translateY(50%);
      }
      .progress {
        width: 100%;
        height: 80%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        .progress-text {
          font-size: 22px;
          font-weight: bold;
        }
      }
    }
  }
}
::v-deep .el-button-group {
  width: 100%;
  display: flex;
  align-items: center;
  .el-button--medium {
    flex: 1;
    height: 100px;
    font-size: 30px;
  }
}
::v-deep .el-progress--circle .el-progress__text,
.el-progress--dashboard .el-progress__text {
  color: #fff;
}
</style>
